// canvasNest.js

class CanvasNest {
    constructor(canvasElement, settings) {
      this.canvasElement = canvasElement;
      this.settings = settings;
      this.canvas = null;
      this.context = null;
      this.points = [];
      this.mouse = { x: null, y: null, maxDistanceSquared: 20000 };
  
      this.init();
    }
  
    init() {
      this.createCanvas();
      this.updateCanvasSize();
      this.initializePoints();
      this.startAnimation();
  
      window.addEventListener('resize', this.handleResize.bind(this));
      window.addEventListener('mousemove', this.handleMouseMove.bind(this));
      window.addEventListener('mouseout', this.handleMouseOut.bind(this));
    }
  
    createCanvas() {
      this.canvas = this.canvasElement;
      this.context = this.canvas.getContext("2d");
    }
  
    updateCanvasSize() {
      this.canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      this.canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
  
    initializePoints() {
      for (let i = 0; i < this.settings.count; i++) {
        const x = Math.random() * this.canvas.width;
        const y = Math.random() * this.canvas.height;
        const xa = 2 * Math.random() - 1;
        const ya = 2 * Math.random() - 1;
        this.points.push({ x, y, xa, ya, maxDistanceSquared: 6000 });
      }
    }
  
    startAnimation() {
      this.animate();
    }
  
    animate() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  
      const allPoints = [this.mouse].concat(this.points);
  
      this.points.forEach(point => {
        point.x += point.xa;
        point.y += point.ya;
        point.xa *= (point.x > this.canvas.width || point.x < 0) ? -1 : 1;
        point.ya *= (point.y > this.canvas.height || point.y < 0) ? -1 : 1;
  
        this.context.fillRect(point.x - 0.5, point.y - 0.5, 1, 1);
  
        allPoints.forEach(otherPoint => {
          if (point !== otherPoint && otherPoint.x !== null && otherPoint.y !== null) {
            const dx = point.x - otherPoint.x;
            const dy = point.y - otherPoint.y;
            const distanceSquared = dx * dx + dy * dy;
  
            if (distanceSquared < otherPoint.maxDistanceSquared) {
              if (otherPoint === this.mouse && distanceSquared >= otherPoint.maxDistanceSquared / 2) {
                point.x -= 0.03 * dx;
                point.y -= 0.03 * dy;
              }
  
              const alpha = (otherPoint.maxDistanceSquared - distanceSquared) / otherPoint.maxDistanceSquared;
              this.context.beginPath();
              this.context.lineWidth = alpha / 2;
              this.context.strokeStyle = `rgba(${this.settings.color},${alpha + 0.2})`;
              this.context.moveTo(point.x, point.y);
              this.context.lineTo(otherPoint.x, otherPoint.y);
              this.context.stroke();
            }
          }
        });
  
        allPoints.splice(allPoints.indexOf(point), 1);
      });
  
      requestAnimationFrame(this.animate.bind(this));
    }
  
    handleResize() {
      this.updateCanvasSize();
    }
  
    handleMouseMove(event) {
      this.mouse.x = event.clientX;
      this.mouse.y = event.clientY;
    }
  
    handleMouseOut() {
      this.mouse.x = null;
      this.mouse.y = null;
    }
  
    destroy() {
      window.removeEventListener('resize', this.handleResize);
      window.removeEventListener('mousemove', this.handleMouseMove);
      window.removeEventListener('mouseout', this.handleMouseOut);
    }
  }
  
  // 导出类
  export default CanvasNest;